<script setup>
import { ref, onMounted, computed } from 'vue'
import { RouterLink, useRouter } from 'vue-router'
import { Api } from '@/api'
import {useUserStore}from '@/stores/user.js'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const router = useRouter()
const psychologyForms = ref([])
const loading = ref(true)
const error = ref(null)

// 判断用户是否为管理员或咨询师
const canManage = computed(() => {
  const user = userStore.user
  return user?.is_counselor || user?.is_admin
})

// 跳转到管理页面
const goToManage = () => {
  router.push('/test/manage')
}

// 从后端获取心理测评问卷表
const loadPsychologyForms = async () => {
  try {
    loading.value = true
    const response = await Api.getQuestionnaireList()
    if (response.data && Array.isArray(response.data.data)) {
      psychologyForms.value = response.data.data.map((form) => ({
        title: form.title,
        introduction: form.ps_introduction,
        id: form.id,
        scoring: form.scoring || '{}',
      }))
    } else {
      error.value = '数据格式错误，无法加载心理测评问卷表'
      console.error('后端返回的数据格式不正确:', response.data)
    }
  } catch (err) {
    error.value = '加载心理测评问卷表失败，请稍后再试'
    console.error('加载心理测评问卷表失败:', err)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadPsychologyForms()
})
</script>

<template>
  <div class="tests">
    <div class="banner">
      <h1>心理测评</h1>
      <p>专业的心理测评工具，帮助你更好地认识自己</p>
    </div>

    <!-- 管理工具区域 -->
    <div v-if="canManage" class="admin-tools">
      <div class="admin-tools-right">
        <el-button type="primary" @click="goToManage">问卷管理</el-button>
      </div>
    </div>

    <div class="content">
      <div v-if="loading" class="loading">
        <div class="spinner"></div>
        <p>加载中...</p>
      </div>
      <div v-else-if="error" class="error">{{ error }}</div>
      <div v-else class="test-grid">
        <div v-for="test in psychologyForms" :key="test.id" class="test-card">
          <h2>{{ test.title }}</h2>
          <p>{{ test.introduction }}</p>
          <RouterLink :to="'/test/' + test.id" class="start-test">开始测试</RouterLink>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.banner {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/about-banner.jpg');
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
  padding: 4rem 1rem;
}

.test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.test-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.start-test {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #4caf50;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

.start-test:hover {
  background-color: #45a049;
}

.loading,
.error {
  text-align: center;
  font-size: 1.2rem;
  margin: 20px 0;
}

.error {
  color: #ff4444;
}

.admin-tools {
  padding: 15px;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}

.admin-tools-right {
  display: flex;
  gap: 10px;
}
</style>
